<template>
	<scroll-view :scroll-y="true" @scrolltolower="getListData" class="container">
		<swiper
			class="ml-30 mr-30 br-24 oh"
			:style="{ height: `260rpx` }"
			:indicator-dots="true"
			:autoplay="true"
			:interval="3000"
			:duration="1000"
			:circular="true"
			indicator-color="#eee"
			indicator-active-color="#3ec483"
		>
			<swiper-item v-for="(item, index) in banners" :key="index">
				<image
					class="width-100percent height-100percent"
					:src="item.img"
					@click="navigateTo(item.url)"
					mode="aspectFill"
				/>
			</swiper-item>
		</swiper>

		<view :style="{ margin: `40rpx 60rpx` }" class="fd-row jc-sb">
			<navigator
				v-for="(option, key) in options"
				:key="key"
				:url="`/pages/home/PlaceOrder?tabName=${key}`"
				hover-class="tap-hover"
				hover-stay-time="50"
				class="ai-center"
			>
				<image
					class="width-100 height-100"
					:src="`/static/images/icon-${key}.png`"
					mode="aspectFit"
				/>
				<text class="color-1b1b1b fs-24 mt-20">{{ option }}</text>
			</navigator>
		</view>

		<navigator
			url="/pages/home/Notice"
			:style="{
				borderTop: `solid 20rpx #f8f8f8`,
				borderBottom: `solid 20rpx #f8f8f8`,
				padding: `30rpx`,
			}"
			class="content-box fd-row ai-center"
		>
			<image
				class="width-76 height-80"
				src="/static/images/pic-notice.png"
				mode="aspectFit"
			/>

			<view class="f1 oh fs-24 color-666 ml-24 mr-60 lh-40">
				<label v-for="(notice, index) in notices" :key="index" class="notice">
					<text class="f1 ellipsis">
						{{ notice.title }}
					</text>
				</label>
			</view>
			<uni-icons type="arrowright" color="#999" />
		</navigator>

		<view class="pt-20 pb-20">
			<navigator
				v-for="(item, index) in news.list"
				:key="index"
				:url="`/pages/common/Webview?url=${createUrl(item.id)}`"
				:style="{ margin: `20rpx 30rpx` }"
				class="fd-row"
			>
				<image
					:style="{ width: `260rpx`, height: `160rpx` }"
					class="bgc-eee br-10"
					:src="item.thumb"
					mode="aspectFill"
				/>
				<view class="f1 jc-sa ml-20 oh">
					<view>
						<text class="color-1b1b1b fs-30 ellipsis">
							{{ item.title }}
						</text>
						<text class="color-999 fs-24 multi-ellipsis mt-6">
							{{ item.description }}
						</text>
					</view>
					<text class="color-999 fs-24">{{ item.create_time }}</text>
				</view>
			</navigator>
		</view>

		<uni-load-more :status="loadStatus" />
	</scroll-view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import uniIcons from "@/components/uni-icons.vue";
	import uniLoadMore from "@/components/uni-load-more.vue";
	import { Pager } from "@/common/type";
	import { isAbsoluteURL, Storage } from "@/libs/utils";
	import { $config } from "@/common";

	let requestFlag: boolean = false;
	@Component({ components: { uniIcons, uniLoadMore } })
	export default class Home extends Vue {
		// component property
		banners: AnyObject[] = [];
		notices: AnyObject[] = [];
		news: Pager<AnyObject> = {
			list: [],
			page: 1,
			size: 10,
		};
		loadStatus: string = "loading";
		options: AnyObject = {
			transport: "城配运输",
			carry: "搬运服务",
			install: "安装服务",
		};

		createUrl(id: number): string {
			const { online, path } = $config;
			const url = encodeURIComponent(
				`http${online.isSecureProtocol ? "s" : ""}://${online.host}${
					online.port.api ? ":" + online.port.api : ""
				}/richText.html?id=${id}&authorization=${Storage.get("authorization")?.access_token}#${
					path.api_prefix
				}/news/show`
			);
			return url;
		}

		created() {
			this.$request.get("/ads/list", { id: 1 }).then(({ data }) => (this.banners = data));

			this.$request.get("/news/list", { id: 1, size: 2 }).then(({ data }) => {
				this.notices = data.list;
			});
			this.getListData();
		}

		getListData() {
			const { $request, news } = this;
			if (requestFlag || !news.page) return;
			(requestFlag = true), (this.loadStatus = "loading");

			$request
				.get("/news/list", {
					id: 2,
					page: news.page,
					size: 10,
				})
				.then(({ data }) => {
					news.list.push(...data.list);
					news.page = +data.page * news.size < data.total ? ++data.page : 0;
					this.loadStatus = news.page ? "more" : "noMore";
				})
				.finally(() => (requestFlag = false));
		}
		navigateTo(src: string | null) {
			if (typeof src !== "string") return;

			const url = isAbsoluteURL(src) ? `/pages/common/Webview?url=${src}` : src;

			uni.navigateTo({ url });
		}
	}
</script>

<style lang="scss" scoped>
	// scss
	.notice::before {
		content: "";
		width: 12rpx;
		height: 12rpx;
		background-color: #3ec483;
		border-radius: 50%;
		margin-right: 18rpx;
	}
</style>